<template>
    <div class="shop-car">
      <!-- 头部标题 -->
      <van-nav-bar title="购物车" left-arrow left-text="返回" @click-left="$goBack" />
      <!-- 购物车内容 -->
      <!-- 没有商品 -->
      <div class="empty-box" v-if="shopCarData.length === 0">
        <van-icon name="smile-o" size="50px" />
        <p>购物车空空如也</p>
        <van-button style="width: 200px;" type="primary" color="#1baeae" to="/">前往首页</van-button>
      </div>
      <!-- 有商品 -->
      <div class="unempty-box" v-if="shopCarData.length > 0">
        <!-- 购物车列表 -->
        <div class="shopList">
          <div class="list-Item" v-for="item in shopCarData" :key="item.goodsId">
            <!-- 多选 -->
            <van-checkbox v-model="checked[item.goodsId]" style="padding-right: 10px;" />
            <!-- 图片 -->
            <img :src="item.goodsCoverImg" alt="">
            <!-- 右侧内容 -->
            <div class="right-box">
              <!-- 头部标题 -->
              <div class="top">
                <!-- 标题文字 -->
                <span>{{ item.goodsName }}</span>
                <!-- 数量 -->
                <span>{{ item.quantity }}</span>
              </div>
  
              <!-- 底部结构 -->
              <div class="botton">
                <!-- 价格信息 -->
                <span>￥{{ item.sellingPrice }}</span>
                <!-- 数量加减 -->
                <van-stepper v-model="item.quantity" @change="(value) => updateQuantity(item.goodsId, value)"/>
                <!-- 删除按钮 -->
              </div>
            </div>
          </div>
        </div>
        <!-- 底部结算栏 -->
        <van-submit-bar :price="countPrice*100" button-color="#000" button-text="结算">
          <van-button type="danger" size="small" @click="removeItem">清空</van-button>
          <van-checkbox v-model="allChecked" @click="toggleAll">全选</van-checkbox>
        </van-submit-bar>
      </div>
      <!-- 底部导航栏 -->
      <BottomTabBar />
    </div>
  </template>
  
  <script>
  import BottomTabBar from '@/components/BottomTabBar.vue';
  export default {
    components: {
    BottomTabBar,
  },
    data() {
      return {
        active: 2,
        checked: {},
      };
    },
    computed: {
      shopCarData() {
        console.log(this.$store.state.cartItems);
        return this.$store.state.cartItems;
      },
      allChecked: {
        get() {
          return this.shopCarData.every(item => this.checked[item.goodsId]);
        },
        set(value) {
          this.shopCarData.forEach(item => {
            this.$set(this.checked, item.goodsId, value);
          });
        }
      },
      countPrice() {
        let total = 0;
        this.shopCarData.forEach(item => {
          total += item.quantity * item.sellingPrice;
        });
        return total;
      },
    },
    methods: {
      updateQuantity(goodsId, quantity) {
        this.$store.dispatch('updateQuantity', { goodsId, quantity });
      },
      removeItem() {
        this.$store.dispatch('clearCart'); // 调用 action 清空购物车
      },
      toggleAll() {
        const isChecked = !this.allChecked;
        this.shopCarData.forEach(item => {
          this.$set(this.checked, item.goodsId, isChecked);
        });
      },
    }
  };
  </script>
  
  <style scoped lang="less">
  .van-tabbar {
    position: relative !important;
  }
  
  .shop-car {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  
  .empty-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    justify-content: center;
  }
  
  .van-submit-bar {
    position: relative;
  }
  
  .unempty-box {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
  
    .shopList {
      flex: 1;
      padding: 0px 12px;
      overflow: auto;
  
      .list-Item {
        display: flex;
        align-items: center;
        overflow: hidden;
        margin: 20px;
  
        img {
          height: 60px;
          margin: 0 16px;
        }
  
        .right-box {
          overflow: hidden;
  
          .top {
            display: flex;
            align-items: center;
  
            & span:nth-child(1) {
              flex: 1;
              margin-right: 16px;
              // 溢出隐藏，多余部分...表示
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
  
          .botton {
            display: flex;
            align-items: center;
            justify-content: space-between;
  
            span {
              color: red;
            }
          }
        }
      }
    }
  }
  </style>